<template>
  <div class="layout-container">
    <el-container class="layout-wrapper">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
        <div class="logo">
          <span v-if="!isCollapse">血压管理</span>
          <span v-else>MS</span>
        </div>
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :unique-opened="true"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @select="handleMenuSelect"
        >

          
          <el-sub-menu index="system">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="user-management">用户管理</el-menu-item>
            <el-menu-item index="device-management">设备管理</el-menu-item>
            <el-menu-item index="version-management">版本管理</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="function">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>功能管理</span>
            </template>
            <el-menu-item index="history-data">历史数据管理</el-menu-item>
            <el-menu-item index="upload-data">上传数据管理</el-menu-item>
            <el-menu-item index="workload-management">工作量管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container class="main-container">
        <!-- 顶部导航栏 -->
        <el-header class="header">
          <div class="header-left">
            <el-button
              type="text"
              @click="toggleSidebar"
              class="collapse-btn"
            >
              <el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
            </el-button>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="user-info">
                <el-icon><User /></el-icon>
                <span>管理员</span>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <component :is="currentComponent" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, markRaw, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserManagement from '../components/UserManagement.vue'
import DeviceManagement from '../components/DeviceManagement.vue'
import VersionManagement from '../components/VersionManagement.vue'
import HistoryData from '../components/HistoryData.vue'
import UploadData from '../components/UploadData.vue'
import WorkloadManagement from '../components/WorkloadManagement.vue'

const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)
const activeMenu = ref('user-management')

// 页面组件映射
const componentMap = {
  'user-management': markRaw(UserManagement),
  'device-management': markRaw(DeviceManagement),
  'version-management': markRaw(VersionManagement),
  'history-data': markRaw(HistoryData),
  'upload-data': markRaw(UploadData),
  'workload-management': markRaw(WorkloadManagement)
}

// 页面标题映射
const titleMap = {
  'user-management': '用户管理',
  'device-management': '设备管理',
  'version-management': '版本管理',
  'history-data': '历史数据管理',
  'upload-data': '上传数据管理',
  'workload-management': '工作量管理'
}

const currentComponent = computed(() => {
  return componentMap[activeMenu.value] || componentMap['user-management']
})

const currentPageTitle = computed(() => {
  return titleMap[activeMenu.value] || '用户管理'
})

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const handleMenuSelect = (index) => {
  // 只有叶子节点菜单项才会切换页面内容
  // 父级菜单项（如 'system', 'function'）不会触发页面切换
  if (componentMap[index]) {
    activeMenu.value = index
  }
}

const handleCommand = async (command) => {
  if (command === 'logout') {
    try {
      await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      
      localStorage.removeItem('token')
      ElMessage.success('退出成功')
      router.push('/login')
    } catch {
      // 用户取消
    }
  } else if (command === 'profile') {
    ElMessage.info('个人中心功能开发中...')
  }
}

// 组件挂载时处理URL参数
onMounted(() => {
  const menuParam = route.query.menu
  if (menuParam && componentMap[menuParam]) {
    activeMenu.value = menuParam
  }
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
  overflow: hidden;
}

.layout-wrapper {
  height: 100%;
}

.sidebar {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3a4b;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.sidebar-menu {
  border: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px !important;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.collapse-btn {
  font-size: 18px;
  color: #606266;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #606266;
}

.main-content {
  flex: 1;
  background-color: #f0f2f5;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  background-color: white;
  border-radius: 4px;
  margin: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>